// createRef 的使用
import React, { Component } from 'react'

export default class CreateRef extends Component {
  //1. 为实例添加属性
  input = React.createRef();
  div = React.createRef();
  //声明实例的方法作为事件回调
  show = () => {
    //获取 input 元素中的值
    //3. 通过 this.input.current
    let v = this.input.current.value;
    //设置 div 的文本
    this.div.current.innerHTML = v;
  }

  render() {
    return (
      <div>
        {/* 2. 为虚拟 DOM 对象添加 ref 属性 */}
        <input type="text" ref={this.input}  /><button onClick={this.show}>显示</button>
        <hr />
        <div ref={this.div} style={{width: 300, height: 200, border: 'solid 1px #258'}}>

        </div>
      </div>
    )
  }
}
